<!DOCTYPE HTML>
<html>
<head>
	<title>pixi.js example 15 - Filters</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #000000;
		}
	</style>
	
	<script src="../../bin/pixi.dev.js"></script>
	<script src="pixi.js"></script>
</head>
<body>
	<script>
	
	var renderer = PIXI.autoDetectRenderer(630, 410);
	renderer.view.style.position = "absolute"
	renderer.view.style.width = window.innerWidth + "px";
	renderer.view.style.height = window.innerHeight + "px";
	renderer.view.style.display = "block";
	
	// add render view to DOM
	document.body.appendChild(renderer.view);

	// create an new instance of a pixi stage
	var stage = new PIXI.Stage(0xFFFFFF, true);
	
	var pondContainer = new PIXI.DisplayObjectContainer();
	stage.addChild(pondContainer);

	stage.interactive = true;
	
	var bg = PIXI.Sprite.fromImage("displacement_BG.jpg");
	pondContainer.addChild(bg);

	//var fish = PIXI.Sprite.fromImage("displacement_fish2.jpg");//
	//littleDudes.position.y = 100;
	var padding = 100;
	var bounds = new PIXI.Rectangle(-padding, -padding, 630 + padding * 2, 410 + padding * 2)
	var fishs = [];


	for (var i = 0; i < 20; i++) 
	{
		var fishId = i % 4;
		fishId += 1;

		//console.log("displacement_fish"+fishId+".png")
		var fish =  PIXI.Sprite.fromImage("displacement_fish"+fishId+".png");
		fish.anchor.x = fish.anchor.y = 0.5;
		pondContainer.addChild(fish);

		//var direction 
		//var speed = 
		fish.direction = Math.random() * Math.PI * 2;
		fish.speed = 2 + Math.random() * 2;
		fish.turnSpeed = Math.random() - 0.8;

		fish.position.x = Math.random() * bounds.width;
		fish.position.y = Math.random() * bounds.height;
		//fish.speed = new PIXI.Point(0,0)

		fish.scale.x = fish.scale.y = 0.8 + Math.random() * 0.3;
		fishs.push(fish);

	};
	
	var overlay = new PIXI.TilingSprite(PIXI.Texture.fromImage("zeldaWaves.png"), 630, 410);
	overlay.alpha = 0.2
	pondContainer.addChild(overlay);


	var displacementTexture = PIXI.Texture.fromImage("displacement_map.jpg");
	var displacementFilter = new PIXI.DisplacementFilter(displacementTexture);

	
	pondContainer.filters = [displacementFilter];

	

	displacementFilter.scale.x = 50;
	displacementFilter.scale.y = 50;

	

	
	
	
	
	var count = 0;
	var switchy = false;
	
	/*
	 * Add a pixi Logo!
	 */
	var logo = PIXI.Sprite.fromImage("../../logo_small.png")
	stage.addChild(logo);
	
	logo.anchor.x = 1;
	logo.anchor.y = 1;

	logo.position.x = 630
	logo.scale.x = logo.scale.y = 0.5;
	logo.position.y = 400;
	logo.interactive = true;
	logo.buttonMode = true;
	
	logo.click = logo.tap = function()
	{
		window.open("https://github.com/GoodBoyDigital/pixi.js", "_blank")
	}
	
	
	requestAnimFrame(animate);

	function animate() {
		
		count += 0.1;
		
		var blurAmount = Math.cos(count) ;
		var blurAmount2 = Math.sin(count * 0.8)  ;

		

		for (var i = 0; i < fishs.length; i++) 
		{
			var fish = fishs[i];

			fish.direction += fish.turnSpeed * 0.01;
			fish.position.x += Math.sin(fish.direction) * fish.speed;
			fish.position.y += Math.cos(fish.direction) * fish.speed;

			fish.rotation = -fish.direction - Math.PI/2;

			// wrap..

			if(fish.position.x < bounds.x)fish.position.x += bounds.width;
			if(fish.position.x > bounds.x + bounds.width)fish.position.x -= bounds.width

			if(fish.position.y < bounds.y)fish.position.y += bounds.height;
			if(fish.position.y > bounds.y + bounds.height)fish.position.y -= bounds.height
		}

	
		displacementFilter.offset.x = count * 10//blurAmount * 40;
		displacementFilter.offset.y = count * 10
		
		overlay.tilePosition.x = count * -10//blurAmount * 40;
		overlay.tilePosition.y = count * -10
		
	    renderer.render(stage);
	    requestAnimFrame( animate );
	}

	</script>

	</body>
</html>
